<template>
  <BaseLayout>
    <template v-slot:main-left>
      <Institution />
    </template>
    <template v-slot:main-button>
      <mainButton :main-button="mainButton" />
    </template>
    <template v-slot:search-info>
      <searchMain
        size="mini"
        label-width="90px"
        :search-data="searchData"
        :search-form="searchForm"
        :search-handle="searchHandle"
        @callbackComponent="callbackComponent"
      />
      <el-divider />
    </template>
    <template v-slot:table-main>
      <tableMain
        :data="infoList"
        border
        :columns-item="columns"
        :title="infoTitle"
        :item-list="itemList"
        @checkbox-change="selectChangeEvent"
      />
    </template>
    <template v-slot:table-member>
      <tableMain
        :data="testList"
        border
        :columns-item="testColumns"
        :title="testTitle"
        :item-list="itemList"
        @checkbox-change="selectChangeEvent"
      />
    </template>
    <!-- 弹框 -->
    <template v-slot:add-dialog>
      <pageDialog
        ref="pageDialog"
        :dialog-visible.sync="dialog_show"
        :title="title"
        @close="closeDialog"
      />
    </template>
  </BaseLayout>
</template>
<script>
import BaseLayout from "@/components/Layout/base.vue"
import Institution from "@/components/Trees/Institution.vue"
import mainButton from "@/components/CommonButtons/MainButton.vue"
import searchMain from "@/components/SearchQuery/SearchMain.vue"
// import tableMain from '@/components/Table/TableMain.vue'
import mainPage from "@/components/Paging/MainPage.vue"
import tableMember from "@/components/Table/TableMember.vue"
import memberPage from "@/components/Paging/MemberPage.vue"
import pageDialog from "@/views/dialog/pageDialog.vue"
import tableMain from "@/components/CommonTable/index.vue"
// 加载模拟数据
import {
  infoList,
  testList,
  sexs,
  fileStatusType,
  liveType,
  dataSource,
  helpPoor,
  peopleSigns,
  publicSigns,
  dataProps,
  searchHandle
} from "@/simdata/healthData.js"
export default {
  name: "Rights",
  components: {
    BaseLayout,
    Institution,
    mainButton,
    searchMain,
    tableMain,
    mainPage,
    tableMember,
    memberPage,
    pageDialog
  },
  data() {
    return {
      itemList: [
        {
          label: "高",
          colour: "#66FFFF"
        },
        {
          label: "平",
          colour: "#66F"
        }
      ],

      // 配置常用按钮
      mainButton: [
        {
          label: "新增",
          icon: "el-icon-circle-plus-outline",
          type: "primary",
          handle: () => this.addHandle()
        },
        {
          label: "入户",
          icon: "el-icon-edit-outline",
          type: "success",
          handle: () => {
            console.log("点击入户了")
          }
        },
        {
          label: "档案迁移",
          icon: "el-icon-postcard",
          type: "warning",
          handle: () => {
            console.log("点击档案迁移了")
          }
        }
      ],
      // 查询表单
      searchData: {
        name: null, // 姓名
        myNumber: null, // 个人档案号
        identityNumber: null, // 身份证
        sex: null,
        createDate: "", // 建档时间开始
        endDate: "", // 建档时间结束
        fileStatus: null, // 档案状态
        detailedAddress: null, // 详细地址
        live: null, // 常住类型
        source: null, // 数据来源
        poor: null, // 精准扶贫
        peopleSigns: null, // 人口库标识
        publicSigns: null // 公安标识
      },
      // 配置search label表单
      searchForm: [
        {
          type: "Input",
          label: "个人档案号",
          prop: "myNumber",
          width: "120px",
          span: 8,
          placeholder: ""
        },
        {
          type: "Input",
          label: "姓名",
          prop: "name",
          width: "120px",
          span: 8,
          placeholder: "请输入姓名..."
        },
        {
          type: "Input",
          label: "身份证号",
          span: 8,
          prop: "identityNumber",
          width: "120px",
          placeholder: ""
        },
        {
          type: "Select",
          label: "性别",
          prop: "sex",
          width: "120px",
          options: sexs,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "建档日期",
          prop: "createDate",
          width: "140px",
          placeholder: "请选择..."
        },
        {
          type: "data",
          label: "至",
          prop: "endDate",
          width: "140px",
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "档案状态",
          prop: "fileStatus",
          width: "120px",
          options: fileStatusType,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Input",
          label: "详细地址",
          prop: "detailedAddress",
          width: "120px",
          placeholder: ""
        },
        {
          type: "Select",
          label: "常住类型",
          prop: "live",
          width: "120px",
          options: liveType,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "数据来源",
          prop: "source",
          width: "120px",
          options: dataSource,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "精准扶贫",
          prop: "poor",
          width: "120px",
          options: helpPoor,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "人口库标记",
          prop: "people",
          width: "120px",
          options: peopleSigns,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        },
        {
          type: "Select",
          label: "公安标识",
          prop: "public",
          width: "120px",
          options: publicSigns,
          props: dataProps,
          change: row => "",
          placeholder: "请选择..."
        }
      ],
      // 配置搜索按钮
      searchHandle: searchHandle,
      // 所有列表数据
      infoTitle: "人员基本信息列表",
      testTitle: "家庭成员列表",
      infoList: infoList,
      testList: testList,
      // 配置显示的label标签
      columns: [
        { prop: "name", label: "姓名", width: "100" },
        {
          prop: "sex",
          label: "性别",
          width: "68",
          type: "sex",
          option: [
            {
              value: 1,
              label: "未知的性别"
            },
            {
              value: 2,
              label: "男"
            },
            {
              value: 3,
              label: "女"
            },
            {
              value: 4,
              label: "全部"
            }
          ],
          callback: row => {
            let text = ""
            switch (row.sex) {
              case 1:
                text = "未知的性别"
                break
              case 2:
                text = "男"
                break
              case 3:
                text = "女"
                break
              case 4:
                text = "全部"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "phonenumber", label: "本人电话号码", width: "150" },
        { prop: "linkName", label: "联系人姓名", width: "100" },
        { prop: "linkNumber", label: "联系人电话", width: "150" },
        { prop: "nowAddress", label: "现住地址", width: "150" },
        {
          prop: "isSign",
          label: "是否签约",
          width: "80",
          type: "isSign",
          callback: row => {
            let text = ""
            switch (row.isSign) {
              case 1:
                text = "已签约"
                break
              case 2:
                text = "未签约"
                break
              default:
                text = "其他"
            }
            return text
          }
        }, //
        { prop: "responsibleDoctor", label: "责任医生", width: "100" },
        {
          prop: "isHome",
          label: "家庭信息",
          width: "80",
          type: "isHome",
          callback: row => {
            let text = ""
            switch (row.isHome) {
              case 1:
                text = "有"
                break
              case 2:
                text = "无"
                break
              default:
                text = "其他"
            }
            return text
          }
        }, //
        { prop: "creatDoctor", label: "建档医生", width: "100" },
        { prop: "createDate", label: "建档日期", width: "100" },
        { prop: "myNumber", label: "个人健康档案号", width: "150" },
        { prop: "number", label: "家庭档案号", width: "150" },
        {
          prop: "isComplete",
          label: "信息是否完整",
          width: "120",
          type: "isComplete",
          callback: row => {
            let text = ""
            switch (row.isComplete) {
              case 1:
                text = "完整"
                break
              case 2:
                text = "不完整"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        {
          prop: "isLibrary",
          label: "人口库标记",
          width: "100",
          type: "isLibrary",
          callback: row => {
            let text = ""
            switch (row.isLibrary) {
              case 1:
                text = "是"
                break
              case 2:
                text = "否"
                break
              default:
                text = "其他"
            }
            return text
          }
        },
        {
          prop: "isPublic",
          label: "公安标记",
          width: "80",
          type: "isPublic",
          callback: row => {
            let text = ""
            switch (row.isPublic) {
              case 1:
                text = "是"
                break
              case 2:
                text = "否"
                break
              default:
                text = "其他"
            }
            return text
          }
        }
      ],
      // test配置label标签
      testColumns: [
        { prop: "name", label: "姓名", width: "100" },
        { prop: "sex", label: "性别", width: "68" },
        { prop: "age", label: "年龄", width: "80" },
        { prop: "birthdata", label: "出生日期", width: "100" },
        { prop: "identityNumber", label: "身份证号", width: "180" },
        { prop: "relation", label: "与户主关系", width: "100" }
      ],
      // Main分页
      mainPage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 100
      },
      // Member分页
      memberPage: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 100
      },
      // 弹框标记
      dialog_show: false,
      // 弹窗的标题
      title: ""
    }
  },

  created() {
    // this.getRightsList()
  },
  methods: {
    // 点击新增按钮
    addHandle() {
      console.log("点击新增了")
      this.title = "新增"
      this.dialog_show = true
    },
    // 关闭弹框
    closeDialog(isTrue) {
      // this.dialog_show = isTrue
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
    },
    // 监听 页码值的改变事件
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
    },
    // 家庭基本信息复选框选中
    selectChangeEvent({ checked, records }) {
      console.log(checked)
      console.log(records)
    }
  }
}
</script>
<style lang="scss" scoped></style>
